<template>
  <div>
    <el-button
      type="primary"
      icon="el-icon-caret-left"
      circle
      class="back"
      @click="goBack()"
    ></el-button>
    <table>
      <tr>
        <td rowspan="3" colspan="2" width="100">
          <el-image
            :src="require('@/assets/img/toolimg.png')"
            style="width: 150px; height: 150px"
            class="headerImg"
          ></el-image>
        </td>
        <td colspan="2">
          <el-card shadow="never">
            <div class="workerId orderItem">
              <span>工号：</span>
              <span>{{ pageData.workId }}</span>
            </div>
          </el-card>
        </td>
      </tr>
      <tr>
        <td>
          <el-card shadow="never">
            <div class="joinTime orderItem">
              <span>报修类型：</span>
              <span>{{ pageData.faultClass }}</span>
            </div>
          </el-card>
        </td>
      </tr>
      <tr>
        <td>
          <el-card shadow="never">
            <div class="name orderItem">
              <span>联系人：</span>
              <span>{{ pageData.contacts }}</span>
            </div>
          </el-card>
        </td>
      </tr>
    </table>

    <div class="orderItem">
      <span>时间：</span>
      <span>{{ pageData.createdTime }}</span>
    </div>
    <div class="orderItem">
      <span>详细地址：</span>
      <span>{{ pageData.address }}</span>
    </div>
    <div class="orderItem" v-show="pageData.resultDetails !== null">
      <span>工人评价：</span>
      <span class="orderDetailsText">{{ pageData.resultDetails }}</span>
    </div>
    <div class="orderItem" v-show="pageData.message !== null">
      <span>学生评价：</span>
      <span class="orderDetailsText">{{ pageData.message }}</span>
    </div>
    <div class="details">
      <div class="showregion" @click="showmore">
        <span class="showstyle">{{
          showregion ? '收起报错描述' : '展开报错描述'
        }}</span>
      </div>

      <div v-show="showregion" class="detailsText">
        {{ pageData.faultDetail }}
      </div>
    </div>
    <div class="orderItem" v-show="pageData.urls.length > 0">
      <span>图片</span>
      <el-card
        v-for="(url, index) in pageData.urls"
        :key="index"
        :body-style="{ padding: '0' }"
      >
        <el-image
          style="width: 100%; height: 100px"
          :src="url"
          fit="none"
          :preview-src-list="pageData.urls"
        >
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
      </el-card>
    </div>
    <el-button
      type="primary"
      circle
      class="showWork"
      v-show="pageData.workId !== '尚未处理该订单'"
      @click="getWorkInfo()"
      >查</el-button
    >
    <el-button
      style="margin-left: 0px"
      type="success"
      circle
      class="sendMessage"
      v-show="pageData.message === null && pageData.state == 2"
      @click="innerVisible = true"
      >评</el-button
    >
    <el-dialog
      width="90%"
      title="评价订单"
      class="innerEndOrder"
      :visible.sync="innerVisible"
      append-to-body
    >
      <div class="sendBox">
        <span class="my_title">当前维修服务评分：</span>
        <el-rate v-model="endOrderFrom.orderRate" show-text></el-rate>
        <span class="my_title">当前订单评价：</span>
        <el-input
          type="textarea"
          v-model="endOrderFrom.message"
          :rows="13"
          :maxlength="450"
          placeholder="订单评价"
          show-word-limit
        ></el-input>
        <el-button type="primary" @click="submit()" class="submit" round>提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created() {
    const item = this.$route.params.item

    // 如果没有参数则返回跳转
    if (item == null || !item || item === undefined) {
      this.goBack()
      return
    }

    this.pageData.contacts = item.contacts
    this.pageData.address = item.address
    this.pageData.createdTime = item.createdTime.split(' ')[0]
    this.pageData.phone = item.phone
    this.pageData.faultClass = item.faultClass
    this.pageData.resultDetails = item.resultDetails
    this.pageData.message = item.message
    this.pageData.fixTableId = item.fixTableId
    this.pageData.state = item.state
    this.pageData.faultDetail =
      item.faultDetail == null || item.faultDetail.length < 1
        ? '未描述'
        : item.faultDetail

    this.pageData.urls = []
    if (item.urls !== null) {
      if (item.urls.length > 0) {
        for (const url of item.urls) {
          this.pageData.urls.push(this.$http.defaults.baseURL + url)
        }
      }
    }

    if (!item.workId) {
      this.pageData.workId = '尚未处理该订单'
    } else {
      this.pageData.workId = item.workId
    }
  },
  data() {
    return {
      innerVisible: false,
      showregion: true,
      pageData: {
        contacts: '',
        address: '',
        createdTime: '',
        phone: '',
        faultClass: '',
        faultDetail: '',
        workId: '',
        state: '',
        endTime: '',
        message: '',
        resultDetails: '',
        orderId: '',
        urls: []
      },
      endOrderFrom: {
        orderRate: 5,
        message: ''
      }
    }
  },
  methods: {
    sendMessage(item) {
      this.dialogVisible02 = true
    },
    showmore() {
      this.showregion = !this.showregion
    },
    getWorkInfo() {
      this.$http
        .get('student/worker-info', {
          params: {
            id: this.pageData.workId
          }
        })
        .then(res => {
          this.$router.push({
            // 这里必须使用 name，不能使用 path
            name: 'workerDetailsPage',
            params: {
              item: res.data
            }
          })
        })
        .catch(error => {
          console.log(error)
          return this.$message.error('获取个维修工人资料失败')
        })
    },
    submit() {
      const trueGrade = this.endOrderFrom.orderRate * 2
      // 需要检查当前的 message 是否为空，如果为空需要填入一个默认值，否则排序可能会受影响
      if (this.endOrderFrom.message === '') {
        this.endOrderFrom.message = '当前订单未评价'
      }
      // 发起axios请求
      this.$http
        .patch('student/order-end', {
          fixTableId: this.pageData.fixTableId,
          message: this.endOrderFrom.message,
          grade: trueGrade
        })
        .then(res => {
          this.$message.success('评价成功！')
          this.goBack()
        })
        .catch(() => {
          return this.$message.error('评价失败！')
        })
    },
    goBack() {
      this.$router.push({
        // 跳转到上一次的页面
        // this.$router.go(-1)

        // 指定跳转的地址
        // this.$router.replace('/learn')

        // 指定跳转路由的名字下
        // this.$router.replace({name:'menuLink'})

        // 返回跳转过来的父级路由
        path: this.$router.go(-1)
      })
    }
  }
}
</script>

<style lang='less' scoped>
/deep/ .el-card__body {
  width: 100%;
}

.orderItem {
  span {
    text-align: center;
  }
  span:first-child {
    color: rgb(129, 129, 129);
    font-size: 10px;
    margin-top: 10px;
  }

  span:last-child {
    font-weight: bold;
    font-size: 10px;
  }
}

.details {
  .showregion {
    margin-top: 10px;
    margin-bottom: 5px;
    color: rgb(129, 129, 129);
    font-size: 10px;
  }
  .detailsText {
    background-color: #f2f2f2;
    padding: 10px;
    margin-bottom: 10px;
  }
}
.back {
  position: fixed;
  bottom: 10%;
  left: 80%;
  z-index: 10;
}

.showWork {
  position: fixed;
  left: 80%;
  bottom: 20%;
  z-index: 10;
}

.submit {
  margin-top: 20px;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}

.sendMessage {
  position: fixed;
  left: 80%;
  bottom: 30%;
  z-index: 10;
}
</style>
